<template>
	<div class="clearfloat padding-across-10" style="height:100%;margin-bottom: 100px" v-loading="loading" element-loading-text="拼命加载中">
		<div class="navList">
			<div>
				<headerOpreate :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			</div>
		</div>
		<el-row :gutter="5">
			<el-col :span="24">
				<!-- 设备详情 -->
				<div class="bg-purple">
					<div class="panel-title">
						<span>设备码：{{this.templateObj.sn}}</span>
						<span style="font-size: 13px;">(最后一次与服务器连接时间：{{pingTime}})</span>
						<img class="title-img" v-bind:src="imgTitleUrl">
					</div>
					<el-row :gutter="5">
						<el-col :span="24">
							<div>
								<el-table border style="width: 100%;margin-top: 1px" :data="devideInfoData">
									<el-table-column :show-overflow-tooltip="true" label="名称" align="center" prop="name">
									</el-table-column>
									<el-table-column :show-overflow-tooltip="true" label="型号" align="center" prop="model"></el-table-column>
									<el-table-column :show-overflow-tooltip="true" label="应用名称" align="center" prop="appname"></el-table-column>
									<el-table-column :show-overflow-tooltip="true" label="应用版本" align="center" prop="appver"></el-table-column>
								</el-table>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="24">
				<!-- 设备详情 -->
				<div class="bg-purple" style="margin-top: 5px">
					<div class="panel-title">
						<span>设备状态</span>
						<img class="title-img" v-bind:src="imgTitleUrl">
					</div>
					<el-row :gutter="5">
						<el-col :span="isMobile ? 24 : 6" style="margin-top: 3px;">
							<div class="grid-content1 bg-purple">
								<div class="detail-section">
									<div class="section-left">
										<div class="detail-title">
											<span style="font-weight: bold">远程控制</span>
											<i class="fa fa-gears" style="color: #EE7942;padding-top: 10px;font-size: 30px"></i>
										</div>
									</div>
									<div class="section-right" style="text-align: center">
										<div>
											<el-button type="primary" size="small" @click="remoteInventory">图书盘点</el-button>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="isMobile ? 24 : 6" style="margin-top: 3px;">
							<div class="grid-content1 bg-purple">
								<div class="detail-section">
									<div class="section-left">
										<div class="detail-title">
											<span style="font-weight: bold">图书相关</span>
											<i class="fa fa-book" style="color: #EE7942;padding-top: 10px;font-size: 30px"></i>
										</div>
									</div>
									<div class="section-right" style="text-align: center">
										<div>
											<el-button type="primary" size="small" @click="bookInShelf">在架图书({{bookInShelfTotalSize}}册)</el-button>
										</div>
										<div>
											<el-button type="primary" size="small" @click="bookRelateShelf">关联图书({{bookRelateTotalSize}}册)</el-button>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col style="margin-top: 3px" :span="isMobile ? 24 : 6" v-if="statusDatas.mainboardstatus !== undefined">
							<div class="grid-content1 bg-purple">
								<div class="detail-section">
									<div class="section-left">
										<div class="detail-title">
											<i v-if="!statusDatas.mainboardstatus" class="fa fa-window-restore fa-3x" style="color: #13ce66"></i>
											<i v-else style="color: #999999" class="fa fa-window-restore fa-3x"></i>
										</div>
									</div>
									<div class="section-right">
										<div>
											<small style="font-weight: bold;">主板状态</small>
										</div>
										<div>
											<small>状态：
												<el-tag v-if="statusDatas.mainboardstatus === 1" type="danger">未打开</el-tag>
												<el-tag v-if="statusDatas.mainboardstatus === 0" type="success">打开成功</el-tag>
											</small>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col style="margin-top: 3px" :span="isMobile ? 24 : 6" v-if="statusDatas.rfidreaderstatus !== undefined">
							<div class="grid-content1 bg-purple">
								<div class="detail-section">
									<div class="section-left">
										<div class="detail-title">
											<i v-if="statusDatas.rfidreaderstatus === 0" class="fa fa-bullseye fa-3x" style="color: #13ce66"></i>
											<i v-else class="fa fa-bullseye fa-3x" style="color: #999999"></i>
										</div>
									</div>
									<div class="section-right">
										<div>
											<small style="font-weight: bold;">无线读写器状态</small>
										</div>
										<div>
											<small>状态：
												<el-tag v-if="statusDatas.rfidreaderstatus === 1" type="danger">打开异常</el-tag>
												<el-tag v-if="statusDatas.rfidreaderstatus === 0" type="success">打开正常</el-tag>
											</small>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col :span="isMobile ? 24 : 6" style="margin-top: 3px;" v-if="statusDatas.mqttserver !== undefined">
							<div class="grid-content1 bg-purple" style="background-color: #1a9624">
								<div class="detail-section">
									<div class="section-left">
										<div class="detail-title">
											<i class="fa fa-envelope" style="color:#93ff9c;font-size: 80px"></i>
										</div>
									</div>
									<div class="section-right" style="text-align: left;padding-left: 20px">
										<div><span style="font-weight: bold;color: white">消息服务</span></div>
										<div>
											<span style="font-weight: bold;color: white">状态：{{statusDatas.mqttserver === 0 ? '连接' : '断开'}}</span>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="24">
				<!-- 设备详情 -->
				<div class="bg-purple" style="margin-top: 5px">
					<div class="panel-title">
						<span>设备配置</span>
						<img class="title-img" v-bind:src="imgTitleUrl">
					</div>
					<el-row :gutter="5">
						<el-col style="margin-top: 3px" :span="isMobile ? 24 : 6">
							<div class="grid-content1 bg-purple">
								<div class="detail-section">
									<div class="section-left">
										<div class="detail-title">
											<i v-if="configDatas.enabledoubleshelf === 1" class="fa fa-info-circle fa-3x" style="color: #13ce66"></i>
											<i v-else style="color: #999999" class="fa fa-info-circle fa-3x"></i>
										</div>
									</div>
									<div class="section-right">
										<div>
											<small style="font-weight: bold;">启用双书架</small>
										</div>
										<div>
											<small>状态:
												<el-tag v-if="configDatas.enabledoubleshelf === 1" type="success">启用</el-tag>
												<el-tag v-else type="danger">未启用</el-tag>
											</small>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col style="margin-top: 3px" :span="isMobile ? 24 : 6">
							<div class="grid-content1 bg-purple">
								<div class="detail-section">
									<div class="section-left">
										<div class="detail-title">
											<i class="fa fa-refresh fa-3x" style="color: #13ce66"></i>
										</div>
									</div>
									<div class="section-right">
										<div>
											<small style="font-weight: bold;">盘点周期(秒)</small>
										</div>
										<div>
											<small>{{configDatas.interval}}</small>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col style="margin-top: 3px" :span="isMobile ? 24 : 6">
							<div class="grid-content1 bg-purple">
								<div class="detail-section">
									<div class="section-left">
										<div class="detail-title">
											<i class="fa fa-server fa-3x" style="color: #13ce66"></i>
										</div>
									</div>
									<div class="section-right">
										<div>
											<small style="font-weight: bold;">书架一</small>
										</div>
										<div>
											<small>位置:
												<el-tag v-if="configDatas.firstshelflocation == ''" type="danger">未配置</el-tag>
												<span v-else>{{configDatas.firstshelflocation}}</span>
											</small>
										</div>
										<div>
											<small>LED显示:
												<el-tag v-if="configDatas.ad1 == '' || configDatas.ad1 == null" type="danger">未配置</el-tag>
												<span v-else>{{configDatas.ad1}}</span>
											</small>
										</div>
									</div>
								</div>
							</div>
						</el-col>
						<el-col style="margin-top: 3px" :span="isMobile ? 24 : 6" v-if="configDatas.enabledoubleshelf === 1">
							<div class="grid-content1 bg-purple">
								<div class="detail-section">
									<div class="section-left">
										<div class="detail-title">
											<i class="fa fa-server fa-3x" style="color: #13ce66"></i>
										</div>
									</div>
									<div class="section-right">
										<div>
											<small style="font-weight: bold;">书架二</small>
										</div>
										<div>
											<small>位置:
												<el-tag v-if="configDatas.secondshelflocation == ''" type="danger">未配置</el-tag>
												<span v-else>{{configDatas.secondshelflocation}}</span>
											</small>
										</div>
										<div>
											<small>LED显示:
												<el-tag v-if="configDatas.ad2 == '' || configDatas.ad2 == null" type="danger">未配置</el-tag>
												<span v-else>{{configDatas.ad2}}</span>
											</small>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>

		<el-dialog title="设备故障记录" v-model="failureDialog" :class="[dialog-large-width]">
			<div style="padding-bottom: 2px">
				<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="failureStartTime" placeholder="选择起始日期" @change="changeFailureStartTime"></el-date-picker>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="failureEndTime" placeholder="选择结束日期" @change="changeFailureEndTime"></el-date-picker>
			</div>
			<el-table border :data="failureDatas">
				<el-table-column :show-overflow-tooltip="true" type="selection"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="故障代码" align="center" prop="code"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="故障时间" align="center" prop="time"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="故障描述" align="center" prop="desc">
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @size-change="handleFailureSizeChange" @current-change="handleFailureCurrentChange" :current-page="failureCurrentPage" :page-size="failurePageSize" :page-sizes="[10, 20, 30, 40, 50]" layout="total,sizes, prev, pager, next, jumper" :total="failureTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<el-dialog title="设备异常报告" v-model="expDialog" :class="[dialog-large-width]">
			<div style="padding-bottom: 2px">
				<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="expStartTime" placeholder="选择起始日期" @change="changeExpStartTime"></el-date-picker>
				<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
				<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="expEndTime" placeholder="选择结束日期" @change="changeExpEndTime"></el-date-picker>
			</div>
			<el-table border :data="expDatas">
				<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="设备" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="应用名称" align="center" prop="appname"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="应用版本" align="center" prop="appver"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="异常时间" align="center" prop="time"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="异常描述" align="center" prop="desc">
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @size-change="handleExpSizeChange" @current-change="handleExpCurrentChange" :current-page="expCurrentPage" :page-size="expPageSize" :page-sizes="[10, 20, 30, 40, 50]" layout="total,sizes, prev, pager, next, jumper" :total="expTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<!-- 在架图书信息 -->
		<el-dialog title="在架图书信息" v-model="bookInShelfDialog" :class="[dialog-large-width]" @close="closeBookInShelf">
			<div style="width: 100%;padding-bottom: 3px">
				<span style="font-size: 13px;font-weight: bold">检索字段</span>
				<el-select size="small" v-model="inShelfValue" :placeholder="$t('message.selectModeAlert')" style="width: 90px;margin-right: 2px">
					<el-option label="关键字" :value="0"></el-option>
					<el-option label="条码" :value="1"></el-option>
					<el-option label="标签" :value="2"></el-option>
				</el-select>
				<span style="font-size: 13px;font-weight: bold">关键字</span>
				<el-input size="small" style="width: 200px;" class="inline-input" v-model="inShelfSearchModel" placeholder="请输入检索字段关键字">
					<el-button id="searchBookData" slot="append" icon="search" @click="getBookInShelf"></el-button>
				</el-input>
			</div>
			<el-table border :data="bookInShelfDatas">
				<el-table-column type="index"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="书名" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="作者" align="center" prop="author"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="条码" align="center" prop="barcode"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="标签" align="center" prop="tag"></el-table-column>
				<!-- <el-table-column label="馆藏地" align="center" prop="location"></el-table-column> -->
				<el-table-column :show-overflow-tooltip="true" label="当前位置" align="center" prop="position"></el-table-column>
				<!-- <el-table-column label="绑定时间" align="center" prop="bindtime"></el-table-column> -->
				<el-table-column :show-overflow-tooltip="true" label="是否错架" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.iserrorshelf" type="danger"><i class="el-icon-circle-cross el-icon--left"></i>错误</el-tag>
						<el-tag v-else type="success"><i class="el-icon-circle-check el-icon--left"></i>正确</el-tag>
					</template>
				</el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="状态" align="center">
					<template slot-scope="scope">
						<el-tag type="danger" v-if="scope.row.status === 1">丢失</el-tag>
						<el-tag type="warning" v-if="scope.row.status === 2">外借</el-tag>
						<el-tag type="success" v-if="scope.row.status === 3">在库</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @size-change="handleInShelfSizeChange" @current-change="handleInShelfCurrentChange" :current-page="bookInShelfCurrentPage" :page-size="bookInShelfPageSize" :page-sizes="[10, 20, 30, 40, 50]" layout="total,sizes, prev, pager, next, jumper" :total="bookInShelfTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<!-- 关联图书信息 -->
		<el-dialog title="关联图书信息" v-model="bookRelateDialog" :class="[dialog-large-width]" @close="closeBookRelateShelf">
			<div style="width: 100%;padding-bottom: 3px">
				<span style="font-size: 13px;font-weight: bold">检索字段</span>
				<el-select size="small" v-model="relateShelfValue" :placeholder="$t('message.selectModeAlert')" style="width: 90px;margin-right: 2px">
					<el-option label="关键字" :value="0"></el-option>
					<el-option label="条码" :value="1"></el-option>
					<el-option label="标签" :value="2"></el-option>
				</el-select>
				<span style="font-size: 13px;font-weight: bold">关键字</span>
				<el-input size="small" style="width: 200px;" class="inline-input" v-model="relateShelfSearchModel" placeholder="请输入检索字段关键字">
					<el-button id="searchBookData" slot="append" icon="search" @click="getBookRelateShelf"></el-button>
				</el-input>
				<el-button type="danger" size="small" @click="cancelRelateShelf"><i class="el-icon-circle-cross el-icon--left"></i>取消关联</el-button>
			</div>
			<el-table border :data="bookRelateDatas" @selection-change="handleSelectionChange" v-loading="cancelRelateLoading" >
				<el-table-column type="selection"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="书名" align="center" prop="name"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="作者" align="center" prop="author"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="条码" align="center" prop="barcode"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" label="标签" align="center" prop="tag"></el-table-column>
				<!-- <el-table-column label="馆藏地" align="center" prop="location"></el-table-column> -->
				<el-table-column :show-overflow-tooltip="true" label="馆藏位置" align="center" prop="position"></el-table-column>
				<!-- <el-table-column label="绑定时间" align="center" prop="bindtime"></el-table-column> -->
				<el-table-column :show-overflow-tooltip="true" label="状态" align="center">
					<template slot-scope="scope">
						<el-tag type="danger" v-if="scope.row.status === 1">丢失</el-tag>
						<el-tag type="warning" v-if="scope.row.status === 2">外借</el-tag>
						<el-tag type="success" v-if="scope.row.status === 3">在库</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<div class="block" style="text-align:right">
				<el-pagination @size-change="handleRelateShelfSizeChange" @current-change="handleRelateShelfCurrentChange" :current-page="bookRelateCurrentPage" :page-size="bookRelatePageSize" :page-sizes="[10, 20, 30, 40, 50]" layout="total,sizes, prev, pager, next, jumper" :total="bookRelateTotalSize">
				</el-pagination>
			</div>
		</el-dialog>
		<!-- 取消关联图书信息返回结果 -->
		<el-dialog title="取消关联图书操作结果" v-model="cancelRelateResultDialog">
			<el-table border :data="cancelRelateResultDatas">
				<el-table-column type="index"></el-table-column>
				<el-table-column label="书名" align="center" prop="name"></el-table-column>
				<el-table-column label="标签" align="center" prop="tag"></el-table-column>
				<el-table-column label="结果" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.code === 0">操作成功</el-tag>
						<el-tag type="danger" v-else>操作失败</el-tag>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
	import $ from 'jquery';
	import swf from '../../../../assets/js/swfobject.js'
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import { Animation } from '../../../../assets/js/common.js'
	import noRecord from '../../../../assets/images/noRecord.jpg'
	import imgDefault from '../../../../assets/images/title-right.png'
	var date = new Date();
	var that = null;
	var flag = true;

	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				isReload: false,
				pingTime: "",
				imgTitleUrl: imgDefault,
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 0)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				IsOnLine: false, //设备是否在线
				loading: false, //数据加载
				devideInfoData: [],
				deviceUseSumaryData: {},
				statusDatas: {},
				configDatas: {},

				//在架图书
				inShelfValue: 0,
				inShelfSearchModel:'',
				bookInShelfDialog: false,
				bookInShelfDatas: [],
				bookInShelfCurrentPage: 1,
				bookInShelfPageSize: 10,
				bookInShelfTotalSize: 0,

				//关联图书
				relateShelfValue: 0,
				relateShelfSearchModel:'',
				bookRelateDialog: false,
				bookRelateDatas: [],
				bookRelateCurrentPage: 1,
				bookRelatePageSize: 10,
				bookRelateTotalSize: 0,
				multiSelection: [],
				cancelRelateLoading: false,
				cancelRelateResultDialog: false,
				cancelRelateResultDatas: [],

				//故障记录
				failureDialog: false,
				failureDatas: [],
				failureCurrentPage: 1,
				failurePageSize: 10,
				failureTotalSize: 0,
				failureStartTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
				failureEndTime: date.format('yyyy-MM-dd') + ' 23:59:59',

				//异常报告
				expDialog: false,
				expDatas: [],
				expCurrentPage: 1,
				expPageSize: 10,
				expTotalSize: 0,
				expStartTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
				expEndTime: date.format('yyyy-MM-dd') + ' 23:59:59',

				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadDatas'
				},
				{
					show: true,
					type: "danger",
					size: "small",
					icon: "el-icon-eleg-icon_error-triangle el-icon--left",
					name: "故障记录",
					action: "openFailure"
				},
				{
					show: true,
					type: "danger",
					size: "small",
					icon: "el-icon-eleg-icon_clipboard el-icon--left",
					name: "异常报告",
					action: "openExp"
				}
				],
				changeNameObj: {
					waitting: false,
					deviceName: ''
				},
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			backPrev() {
				// this.$emit('changeView', "controlList", {})
			},
			openFailure() {
				this.getFailureDatas();
				this.failureDialog = true;
			},
			//查询设备故障记录
			getFailureDatas() {
				var param = {
					index: this.failureCurrentPage,
					pagesize: this.failurePageSize,
					sn: [this.templateObj.sn],
					begin: this.failureStartTime,
					end: this.failureEndTime,
					type: 2,
					filter: ''
				}
				HttpServer.httpPost.call(this, '/Api/Device/Failure', param, function(response) {}, function(response) {
					// console.log('故障信息',response);
					if(response.data.code === 0) {
						this.failureDatas = response.data.failure;
						this.failureTotalSize = response.data.totalcount;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			changeFailureStartTime(val) {
				this.failureStartTime = val + ' 00:00:00';
				this.getFailureDatas();
			},
			changeFailureEndTime(val) {
				this.failureEndTime = val + ' 23:59:59';
				this.getFailureDatas();
			},
			handleFailureCurrentChange(val) {
				this.failureCurrentPage = val;
				this.getFailureDatas();
			},
			handleFailureSizeChange(val) {	
				this.failurePageSize = val;
				this.getFailureDatas();
			},

			openExp() {
				this.getExpDatas();
				this.expDialog = true;
			},
			getExpDatas() {
				var param = {
					index: this.expCurrentPage,
					pagesize: this.expPageSize,
					sn: [this.templateObj.sn],
					begin: this.expStartTime,
					end: this.expEndTime,
					type: 2,
					filter: ''
				}
				HttpServer.httpPost.call(this, '/Api/Device/AppException', param, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.expDatas = response.data.exp;
						this.expTotalSize = response.data.totalcount;
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			changeExpStartTime(val) {
				this.expStartTime = val + ' 00:00:00';
				this.getExpDatas();
			},
			changeExpEndTime(val) {
				this.expEndTime = val + ' 23:59:59';
				this.getExpDatas();
			},
			handleExpCurrentChange(val) {
				this.expCurrentPage = val;
				this.getExpDatas();
			},
			handleExpSizeChange(val) {
				this.expPageSize = val;
				this.getExpDatas();
			},

			//在架图书
			bookInShelf() {
				this.bookInShelfDialog = true;
				clearInterval(this.ZNSJDetailIntervalid);
				this.getBookInShelf();
			},
			getBookInShelf() {
				HttpServer.httpPost.call(this,'/Api/Book/Info/InSmartBookShelf',{
					sn: this.templateObj.sn, 
					index: this.bookInShelfCurrentPage, 
					pagesize: this.bookInShelfPageSize,
					barcode: this.inShelfValue === 1 ? this.inShelfSearchModel : '',
					tag: this.inShelfValue === 2 ? this.inShelfSearchModel : '',
					keyword: this.inShelfValue === 0 ? this.inShelfSearchModel : '',
				},function(response){}, function(response){
					// console.log('在架图书',response)
					if(response.data.code === 0){
						this.bookInShelfDatas = response.data.info;
						this.bookInShelfTotalSize = response.data.totalcount;
					}else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			closeBookInShelf() {
				if(this.templateObj.online) {
					this.ZNSJDetailIntervalid = setInterval(() => {
						this.getDatas();
					}, 5000)
				}
				this.inShelfValue = 0;
				this.inShelfSearchModel = '';
				this.bookInShelfDialog = false;
				this.getBookInShelf();
			},
			handleInShelfCurrentChange(val) {
				this.bookInShelfCurrentPage = val;
				this.getBookInShelf();
			},
			handleInShelfSizeChange(val) {
				this.bookInShelfPageSize = val;
				this.getBookInShelf();
			},

			//关联图书
			bookRelateShelf() {
				this.bookRelateDialog = true;
				clearInterval(this.ZNSJDetailIntervalid);
				this.getBookRelateShelf();
			},
			//查找智能书架关联图书
			getBookRelateShelf() {
				HttpServer.httpPost.call(this,'/Api/Book/Info/RelateSmartBookShelf',{
					sn: this.templateObj.sn, 
					index: this.bookRelateCurrentPage, 
					pagesize: this.bookRelatePageSize,
					barcode: this.relateShelfValue === 1 ? this.relateShelfSearchModel : '',
					tag: this.relateShelfValue === 2 ? this.relateShelfSearchModel : '',
					keyword: this.relateShelfValue === 0 ? this.relateShelfSearchModel : '',
				},function(response){}, function(response){
					// console.log('关联图书',response)
					if(response.data.code === 0){
						this.bookRelateDatas = response.data.info;
						this.bookRelateTotalSize = response.data.totalcount;
					}else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				})
			},
			handleSelectionChange(val) {
				this.multiSelection = val;
			},
			formateSelection() {
				var result = [], array  = this.multiSelection;
				array.forEach(function(item){
					result.push(item.tag);
				})
				return result;
			},
			//取消关联
			cancelRelateShelf() {
				if(this.formateSelection().length > 0) {
					this.$confirm('此操作将取消所选图书与设备的关联，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.cancelRelateLoading = true;
						HttpServer.httpPost.call(this,'/Api/SmartBookShelf/Delete/Book',{tags: this.formateSelection(), UserId: GloabFun.getKeyId()},function(response){}, function(response){
							this.cancelRelateLoading = false;
							if(response.data.code === 0){
								if(response.data.info.length === 0){
									this.$notify.error({
										title: '错误',
										message: '操作无响应',
										duration: 2500
									});
								}else {
									this.cancelRelateResultDatas = response.data.info;
									this.getBookRelateShelf();
									this.cancelRelateResultDialog = true;
								}
							}else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.operationCanceled'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: '请选择批量操作的图书',
						type: 'warning',
						duration: 2500
					});
				}
			},

			//关闭智能书架关联图书弹窗
			closeBookRelateShelf() {
				if(this.templateObj.online) {
					this.ZNSJDetailIntervalid = setInterval(() => {
						this.getDatas();
					}, 5000)
				}
				this.relateShelfValue = 0;
				this.relateShelfSearchModel = '';
				this.bookRelateDialog = false;
				this.getBookRelateShelf();
			},
			handleRelateShelfCurrentChange(val) {
				this.bookRelateCurrentPage = val;
				this.getBookRelateShelf();
			},
			handleRelateShelfSizeChange(val) {
				this.bookRelateShelfPageSize = val;
				this.getBookRelateShelf();
			},

			//盘点图书
			remoteInventory() {
				this.$confirm('此操作将进行远程图书盘点，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$nextTick(function() {
						this.loading = true;
						HttpServer.httpPost.call(this, '/Api/Peripheral/RemoteInventory', {
							sn: [this.templateObj.sn],
							version: ''
						}, function(response) {}, function(response) {
							this.loading = false;
							if(response.data.code === 0) {
								if(response.data.response.length > 0) {
									if((response.data.response)[0].sn == this.templateObj.sn && (response.data.response)[0].code === 0) {
										this.$notify({
											title: '成功',
											message: this.$t('message.operationSuccess'),
											type: 'success',
											duration: 2500
										});
									} else {
										this.$notify.error({
											title: '错误',
											message: response.data.response[0].msg,
											duration: 2500
										});
									}
								} else {
									this.$notify.error({
										title: '错误',
										message:'操作无响应',
										duration: 2500
									});
								}
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					})
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.operationCanceled'),
						duration: 2500
					})
				});
			},

			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				// this.loading = true;
				HttpServer.httpPost.call(this, '/Api/SmartBookShelf/AllInfo', {
					sn: this.templateObj.sn,
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.getBookInShelf();
						this.getBookRelateShelf();
						this.pingTime = response.data.pingtime;
						if(response.data.config != null) {
							this.configDatas = response.data.config;
						}
						if(response.data.status != null) {
							this.statusDatas = response.data.status;
							response.data.status.name = this.templateObj.name;
							response.data.status.model = this.templateObj.model;
							this.devideInfoData = [response.data.status];
						}
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						// this.$message.error(response.data.msg);
					}
					this.isReload = false;
				});
			},
		},
		created() {
			this.IsOnLine = this.templateObj.online;
			this.getDatas();
			if(this.templateObj.online) {
				this.ZNSJDetailIntervalid = setInterval(() => {
					this.getDatas();
				}, 5000)
			}
		},
		beforeDestroy() {
			clearInterval(this.ZNSJDetailIntervalid);
		}
	}
</script>

<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@import '../../../../assets/css/media-screen.less';
</style>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
	
	.el-date-editor.el-input {
		width: 115px;
	}
	
	.inner-section {
		// margin: 5px 5px;
		// height: 100%;
		// border: 1px solid #BEBEBE;
		.flash-object {
			// margin: 5px 0;
			height: 368px;
			// height: e("calc(100% - 40px)");
			position: relative;
		}
		.opreat-button {
			//text-align: center;
		}
	}
	
	.navList {
		width: 100%;
		padding: 3px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.el-row {
		margin-bottom: 5px;
		.bg-purple {
			width: 100%;
			// background: #EAF4FF;
			.detail-title {
				text-align: center;
				display: flex;
				flex-direction: column;
			}
			.middle-section {
				width: 100%;
				display: flex;
				.middle-bg {}
			}
			.icon-default {
				color: #999999;
			}
			.panel-title {
				width: 100%;
				height: 25px;
				color: white;
				// background-color: rgba(32,160,255,.2);
				background-color: #20A0FF;
				border-radius: 3px;
				// border-bottom: 1px solid #20A0FF;
				line-height: 25px;
				padding-left: 10px;
				.title-img {
					width: 30%;
					float: right;
					height: 100%;
					width: 100px
				}
			}
			.detail-section {
				width: 100%;
				height: 80px;
				display: flex;
				justify-content: space-around;
				.section-left {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					width: 40%;
					height: 100%;
				}
				.section-right {
					text-align: left;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					// align-items: center;
					width: 60%;
					padding: 3px;
					// padding-left: 6px;
					height: 100%;
				}
			}
			.detail-section-3 {
				height: 100px;
				width: 100%;
				display: flex;
				justify-content: space-around;
				>div {
					display: flex;
					align-items: center;
					justify-content: space-around;
					flex-direction: column;
					width: 33%;
					height: 100%;
					.icon {
						height: 44px;
						line-height: 55px;
						i {
							font-size: 43px;
						}
					}
				}
			}
			.detail-section-2 {
				height: 150px;
				width: 100%;
				>div:nth-of-type(1) {
					border-bottom: 1px solid #7f93aa;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
				>div {
					height: 50%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
			}
		}
	}
	
	.grid-content {
		border: 1px solid #FFFFFF;
		height: 400px;
	}
	
	.grid-content1 {
		box-shadow: 0 1px 4px #000;
		border-radius: 5px;
		margin-top: 1px;
		height: 100%;
	}
	
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>